<template>
  <div ref="purchaseItem">

<!--    <el-col>-->
    <el-select size="small" v-model="purchaseItem.productType" style="line-height: 30px;height: 28px;" clearable placeholder="产品类型" prop="productType" filterable>
      <el-option
        v-for="(item,index) in productTypes"
        :key="item.dictValue"
        :label="item.dictLabel"
        :value="item.dictValue"
        @click.native="getSpec($event)"
      />
    </el-select>
    <el-select size="small" v-model="purchaseItem.productguid" style="line-height: 30px;height: 28px" clearable placeholder="产品" filterable>
      <el-option
        v-for="(item,index) in productList"
        :key="item.guid"
        :label="item.productname"
        :value="item.guid"
        @click.native="getSpec($event,item)"
      />
    </el-select>
<!--    </el-col>-->
<!--    <el-col>-->
<!--    </el-col>-->
<!--    <el-col>-->
    <el-select size="small" v-model="purchaseItem.spguid" style="line-height: 30px;height: 28px" clearable placeholder="规格" filterable>
      <el-option
        v-for="(item,index) in specList"
        :key="item.guid"
        :label="item.name"
        :value="item.guid"
        @click.native="specChange(item)"
      />
    </el-select>
<!--    </el-col>-->

<!--    <div style="margin-left: 600px;margin-top: 0">-->
<!--    <el-col>-->
    <el-input size="small" placeholder="数量" v-model="purchaseItem.count" style="width: 150px;line-height: 30px;height: 28px;" :rules="rules.count">
      <template >
      <span slot="suffix" v-model="stockunit">{{purchaseItem.stockunit}}</span>
      </template>
    </el-input>
      <el-input size="small" placeholder="单价" v-model="purchaseItem.price" style="width: 150px;line-height: 30px;height: 28px">
        <span slot="suffix" v-if="purchaseItem.stockunit">元/{{purchaseItem.stockunit}}</span>
      </el-input>
<!--      <p style="margin-top: 0px;margin-left: 130px;" v-model="unitName" v-if="unitName">元/{{ unitName }}</p>-->
<!--    </div>-->
<!--    <div style="margin-right: 25%;margin-top: 0">-->
<!--    </el-col>-->
<!--    <el-col>-->
<!--      <p style="margin-top: 0;margin-left: 10px;float: right" v-model="unitName">{{ unitName }}</p>-->
<!--    </el-col>-->
<!--    </div>-->
    <el-button @click="addItem" style="margin-right: 0;margin-top: 0">+</el-button>
    <el-button @click="delItem" style="margin-right: 0;margin-top: 0" >-</el-button>

  </div>
</template>

<script>
import { addClass, removeClass } from '@/utils'
import { getProduct, getSpecs } from '@/api/purchase/addPurchase'

export default {
  name: 'PurchaseItem',
  data() {
    return {
      // productTypes:[],
      // productList:[],
      specList:[],
      // price:'',
      // count:'',
      spguid:'',
      productguid: '',
      unitName: '',
      productType: '',
      productname:'',
      spName:'',
      specListA: [],
      stockunit: '',
      stockunitid:'',
      formA: {
        tableData: [{},
          {}]
      },
      rules:{
        productType:[{required:true,message:"数量不能为空！",trigger:'blur' },],
      }
    }
  },
  props: {
    // count:'',
    // price:'',
    itemNo:'',
    lastItem:true,
    purchaseItem: {},
    productTypes: {},
    productList: {}

  },
  watch:{
    // 'purchaseItem.productType':function(val){
    //   this.getSpec();
    // },
    // 'purchaseItem.productguid':function(val){
    //   this.getSpec();
    // },
    // immediate: true, deep: true

    // 'purchaseItem.spguid':function(val){
    //   this.specChange(val)
    // },

  },
  components: {},
  onLoad() {
  },
  onShow() {
  },
  created() {
      this.getSpec();
  },
  mounted() {
  },
  methods: {
    specChange( item) {
      console.log(item)
        this.purchaseItem.spname=item.name;
      this.purchaseItem.stockunit = item.stockunit;
      this.purchaseItem.stockunitid=item.stockunitid;
      console.log("unit:",this.purchaseItem.stockunit)
    },
    getSpec(event,item) {

      if (item){
        this.purchaseItem.productname=item.productname
      }
      this.specList.splice(0,this.specList.length)
      if (!this.purchaseItem.productType || !this.purchaseItem.productguid){
        return
      }
      let data = {
        productGuid: this.purchaseItem.productguid,
        type: this.purchaseItem.productType,
        stats: 1
      }
      getSpecs(data).then(response => {
        this.specList = response.data
      })
    },

    delItem: function() {
      console.log("lastITEM",this.lastItem)
      this.$emit('doDelItem');

    },

    addItem: function() {
      this.$emit('doAddItem');
    }
  }
}
</script>

<style>
.showRightPanel {
  overflow: hidden;
  position: relative;
  width: calc(100% - 15px);
}

.el-step__description.is-wait, .el-step__description.is-finish {
  padding-right: 0;
}
</style>

<style lang="scss" scoped>
.rightPanel-background {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
  background: rgba(0, 0, 0, .2);
  z-index: -1;
}

.rightPanel {
  width: 100%;
  max-width: 260px;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
  transition: all .25s cubic-bezier(.7, .3, .1, 1);
  transform: translate(100%);
  background: #fff;
  z-index: 40000;
}

.show {
  transition: all .3s cubic-bezier(.7, .3, .1, 1);

  .rightPanel-background {
    z-index: 20000;
    opacity: 1;
    width: 100%;
    height: 100%;
  }

  .rightPanel {
    transform: translate(0);
  }
}

.handle-button {
  width: 48px;
  height: 48px;
  position: absolute;
  left: -48px;
  text-align: center;
  font-size: 24px;
  border-radius: 6px 0 0 6px !important;
  z-index: 0;
  pointer-events: auto;
  cursor: pointer;
  color: #fff;
  line-height: 48px;

  i {
    font-size: 24px;
    line-height: 48px;
  }
}
</style>
